
import React from 'react';
import './forms.scss';
import { FormGroup } from '../../utils/form/FormGroup';




interface IProps {
    formGroup?: FormGroup | undefined,
 }
export default function NullField(props: IProps) {

    const { formGroup } = props;

    const dropZoneRef = React.useRef(null);

    React.useEffect(() => {

        const dropZoneEle = dropZoneRef.current as unknown as HTMLDivElement;

        dropZoneEle.addEventListener('dragenter', (event) => {
            event.preventDefault();
            dropZoneEle.classList.add('dragover');
        });

        dropZoneEle.addEventListener('dragleave', (event) => {
            event.preventDefault();
            dropZoneEle.classList.remove('dragover');
        });
        
        dropZoneEle.addEventListener('dragover', (event) => {
            event.preventDefault();
            if (event.dataTransfer) {
                event.dataTransfer.dropEffect = 'move';
            }
        });
        // 放置数据
        dropZoneEle.addEventListener('drop', (event) => {
            event.preventDefault();
            dropZoneEle.classList.remove('dragover');
            if (event.dataTransfer) {
                // 获取设置的数据
                const dragKey = event.dataTransfer.getData('dragKey');
                // console.log(dragKey, formGroup);
                const groupId = formGroup!.groupData.id;
                formGroup!.groupData.editInstance.dragFieldToGroup(dragKey, groupId);
            }
        });
    }, []);

    return ( <div className='null' ref={dropZoneRef} draggable></div> );
}
